<template>
  <main-nav-bar>
    <template v-slot:home-nav-back>
      <div><i class="iconfont icon-jiantou2"></i></div>
    </template>
  </main-nav-bar>
  <scroller
    class="home-scroller"
    ref="scroller"
    :probe-type="3"
    @pullingUp="pullingUp"
  >
    <div class="content">
      <review-item :reviewMsgList="reviewList" />
    </div>
    <div class="new_content">
      <div class="new_top">
        <div
          @click="changeSelect(1)"
          class="left"
          :class="{ active: flage == true }"
        >
          <div class="left_p">赞&nbsp;{{ reviewList.good }}</div>
          <div class="bottom"></div>
        </div>
        <div
          @click="changeSelect(2)"
          class="left"
          :class="{ active: flage == false }"
        >
          <div class="left_p">评论&nbsp;{{ reviewList.comment }}</div>
          <div class="bottom"></div>
        </div>
      </div>
      <div class="good" v-if="flage">
        <div
          class="new_li"
          v-for="item in dataList.good_list"
          :key="item.update_time"
        >
          <div class="good_li">
            <div class="good_l">
              <img :src="item.avatar" alt="" />
            </div>
            <div class="good_r">
              <div class="good_r_t">{{ item.user_nickname }}</div>
              <div class="time">{{ getRightTime(item.update_time) }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="tlock" v-else>
        <div
          class="new_li"
          v-for="item in dataList.comment_list"
          :key="item.update_time"
        >
          <div class="good_li good_li_r">
            <div class="good_l">
              <img :src="item.avatar" alt="" />
            </div>
            <div class="good_r">
              <div class="good_r_t">{{ item.user_nickname }}</div>
              <div class="time">{{ getRightTime(item.update_time) }}</div>
            </div>
          </div>
          <div class="comment">
            <p>
              {{ item.intro }}
            </p>
          </div>
        </div>
      </div>
      <p class="end">-- 我也是有底线的 --</p>
    </div>
    
  </scroller>
  <van-cell-group v-if="$store.state.showReview" class="reviewContent">
    <van-field
      v-model="value"
      rows="1"
      autosize="{ maxHeight: 100, minHeight: 50 }"
      :left-icon="headimgurl"
      autofocus="autofocus"
      type="textarea"
      placeholder="写评论..."
      @blur="closeIpt"
    >
      <template #button>
        <van-button size="small" type="primary" @click="sendMsg"
          >发送</van-button
        >
      </template>
    </van-field>
  </van-cell-group>
</template>

<script>
import { request } from "/@/network/request.js";
import MainNavBar from "../../components/content/mainnavbar/MainNavBar.vue";
import reviewItem from "/@/components/commont/reviewItem/reviewItem.vue";
import scroller from "../../components/commont/scroller/Scroller.vue";
import { Toast } from "vant";
export default {
  name: "publishdetail",
  data() {
    return {
      value: "",
      flage: false,
      dataList: {
        comment_list: [],
        good_list: [],
      },
      headimgurl: sessionStorage.getItem("headimgurl"),
      club_id: "",
      reviewList: {
        img: "",
      },
      page: {
        comment_list: 1,
        good_list: 1,
      },
    };
  },
  components: {
    MainNavBar,
    reviewItem,
    scroller,
    type: 1,
  },
  methods: {
    closeIpt() {
      if (this.value !== "") {
        Toast("请先发表评论");
        return;
      } else {
        this.$store.commit("changeFalse");
      }
    },
    async sendMsg() {
      if (this.value == "") {
        Toast("写点什么吧");
        return;
      }
      const res = await request({
        url: "v1.club/comment",
        data: {
          user_id: sessionStorage.getItem("user_id"),
          intro: this.value,
          club_id: this.reviewList.id,
        },
      });
      if (res.code == 200) {
        Toast(res.msg);
        this.value = "";
        this.closeIpt();
        this.reviewList.comment += 1;
      } else {
        Toast(res.msg);
      }
    },
    pullingUp() {
      if (this.type === 1) {
        this.getgoodDetail("good_list", false, true);
      } else {
        this.getgoodDetail("comment_list", false, true);
      }
    },
    getRightTime(Time) {
      let date = new Date(Time * 1000);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();

      return `${year}-${month}-${day}`;
    },
    changeSelect(type) {
      this.type = type;
      if (type === 1) {
        this.getgoodDetail("good_list");
        this.page["comment_list"] = 1;
        this.dataList["comment_list"] = [];
        this.flage = true;
      } else {
        this.flage = false;
        this.getgoodDetail("comment_list");
        this.page["good_list"] = 1;
        this.dataList["good_list"] = [];
      }
    },
    async getpublishDetail() {
      const res = await request({
        url: "/v1.club/list",
        data: {
          club_id: this.club_id,
          user_id: sessionStorage.getItem("user_id"),
        },
      });
      if (res.code === 200) {
        this.reviewList = res.data.data;
        this.reviewList.img = this.reviewList.img.join(",");
        // console.log(this.reviewList);
      } else {
        Toast({
          message: res.msg,
        });
      }
    },
    async getgoodDetail(type, flag = false, isLoadMore = false) {
      const res = await request({
        url: "v1.club/" + type,
        data: {
          club_id: this.club_id,
          page: this.page[type],
        },
      });

      if (res.data.rows.length !== 0) {
        if (isLoadMore) this.dataList[type].push(...res.data.rows);
        else this.dataList[type] = res.data.rows;
        this.page[type] += 1;
      }
      // else{
      //     Toast("没有更多了");
      // }
      this.$refs.scroller.finishPullUp();
    },
  },
  mounted() {
    this.$store.commit("changeFalse")
    document.querySelector(".right_4").style.border = "none";
    this.club_id = this.$route.query.id;
    this.getpublishDetail();
    this.getgoodDetail("comment_list", true);
    // this.getgoodDetail("good_list",true);
  },
};
</script>
<style  scoped>
.home-scroller {
  height: calc(100vh - 11.733vw);
}
p {
  margin: 0;
}
.good_li {
  display: flex;
  height: 17.6vw;
  width: 86.667vw;
  justify-content: space-between;
  border-bottom: solid 0.267vw rgb(229, 229, 229);
  align-items: center;
}
.good_r_t {
  margin-bottom: 2.667vw;
}
.good_l {
  width: 9.333vw;
  height: 9.333vw;
  margin-right: 2.667vw;
}
.good_l img {
  width: 9.333vw;
  height: 9.333vw;
  vertical-align: middle;
  border-radius: 50%;
}
.good_r {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.content {
  padding-top: 8vw;
}
.new_content {
  width: 86.667vw;
  padding: 0 6.667vw;
  padding-top: 2.667vw;
  border-top: solid 0.267vw rgb(229, 229, 229);
}
.new_top {
  display: flex;
}
.left {
  height: 7.733vw;

  font-size: 4.533vw;
  color: #535353;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 8.8vw;
}
.active .bottom {
  height: 0.8vw;
  width: 12vw;
  margin-top: 1.6vw;
  background-color: #5b0000;
}
.active .left_p {
  /* width: 13.067vw; */
  flex-shrink: 0;
  font-weight: bold;
  color: #000;
}
.new_li {
  margin-top: 5.333vw;
  width: 86.667vw;
  /* margin: 0 auto; */
}
.good_li_r {
  width: 100%;
  border: none;
  display: flex;
}
.comment {
  width: 74.667vw;
  margin-left: 11.467vw;
  font-size: 4vw;
  line-height: 5.333vw;
  color: #7a7a7a;
}
.comment p {
  word-wrap: break-word;
  word-break: normal;
  /* text-indent: 15px; */
}
.time {
  color: #b2b2b2;
  font-size: 10px;
}
.end{
  width: 100%;
  margin-top: 30px;
  color: #bbb;
  text-align: center;
  font-size: 10px;
}
</style>